backbone vs react

两者的比较 和思想的演变

backbone的劣势:

前端view 基于jquery, 资料从Model/Collection,根据资料render view 当有user input的时候,通过DOM listener 通知绑定的view instance 来通知model去做变化

backbone的最大的缺点:

使用者必須要手動維護View instance的生命周期model A 被从collection B移除时, 负责render collection B 到画面view ,必需手动把model A相连的view instance移掉。 为什么生成view的时候不用管太多,移除view却要手动

反观react.js + flux 优势

  • Custom Element: 真正的Reusable、Scalable的原件化component,
  • 单向数据流: 易除错, 架构清晰完整, 运用dispatcher且逻辑完整的思考模式
  • single source of truth : 核心思想

概念上

backbone 是一个前端的 mvc framework react 仅仅是一个构建可组合的UI component 的lib , 一种全新的前端编程方式,可以吧react 看成view , 所以说这两个框架的对比,主要是view的对比

原理上

react 和 backbone 都是通过监听模型状态的变化来触发 DOM 更新

数据流

react 是单向的数据流,从root往下传递,然后任何一个子节点都得传回root再往下传给其他节点,优点是使代码阅读起来非常的流畅,

backbone 没有数据流这个概念

数据处理,也就是database 和model部分的操作

backbone 有一个collection,

视图Render

react 使用 virtual dom 概念 , 如何深入理解,实例 ``` /* @jsx React.DOM / var HelloMessage = React.createClass({ render: function() { return

Hello{this.props.name}
; } });

React.renderComponent(, mountNode);

```

上述例子首先创建了一个react组件类 HelloMessage, 然后创建了一个virtual dom ( 其实是 HelloMessage组件类的一个实例, 并把这个实例添加一个真实的mountNode dom节点中去

下面我们来深入理解一下virtual dom和 真实dom的关系,我们先假定 mountNode 节点就是body 元素

渲染自定义的组件是通过render() 函数, 在这个例子中,render函数返回一个div元素并包含内容, react调用它得到一个

元素并更新到真实的dom中去,

Representing State and Changes

组件是怎样用来同步更新的呢, 如果react 不能同步更新的话, 那么就跟一些静态的渲染库没什么两样了。 但是react是一个高效的同步更新库,

react 里面的模型是以组件中的state 属性来表示的,

results matching ""

    No results matching ""